import React, { Component } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { Button } from 'antd';
import './Gantt.css';

// const Gantt: React.FC = () => {


//         const { tasks } = this.props;
//         gantt.init(this.ganttContainer);
//         gantt.parse(tasks);

//     return (
//         <div
//                 ref={ (input) => { this.ganttContainer = input } }
//                 style={ { width: '100%', height: '100%' } }

export default class Gantt extends Component {

    componentDidMount() {


        // gantt.config.date_format = "%Y-%m-%d %H:%i";
        gantt.config.scales = [
            { unit: "year", step: 1, format: "%Y" },
            // {unit: "month", step: 1, format: "%m"},
            // {unit: "week", step: 1, format: "%W"},
            { unit: "day", step: 1, format: "%m月 %d号" },
            { unit: "hour", step: 1, format: "%H" }
        ];



        gantt.config.autosize = "y";
        // const { tasks } = this.props;
        // this.state={
        //     taskState:{}
        // }
        gantt.init(this.ganttContainer);

    }

    componentWillReceiveProps(newProps) {
        // alert(JSON.stringify(newProps.tasks));
        // alert(JSON.stringify(this.props.tasks));

        


    }

    shouldComponentUpdate(newProps, newState) {

        var arr = Object.keys(newProps.tasks);
        if (arr.length != 0) {
            
            gantt.parse(newProps.tasks);
            if (JSON.stringify(newProps.tasks) != JSON.stringify(this.props.tasks)) {
                // alert('bu同');
                // alert(JSON.stringify(newProps.tasks));
                // alert(JSON.stringify(this.props.tasks));
                
                
            }

            else {
                // alert('相同');
                return false;
            }

            
        }
        return true;
    }



    render() {


        // const { tasks } = this.props;
        // if(this.state&& JSON.stringify(tasks)!=JSON.stringify(this.state.taskState))
        // {
        //     alert('处理不同');
        //     alert( JSON.stringify(tasks));
        //     alert( JSON.stringify(this.state.taskState));


        //     this.setState({
        //         taskState:tasks
        //     })
        //     gantt.init(this.ganttContainer);
        //     var arr=Object.keys(tasks);
        //     if(arr.length!=0)
        //     gantt.parse(tasks);
        // }else if(this.state)
        // {
        //     alert('相同');
        //     alert( JSON.stringify(tasks));
        //     alert( JSON.stringify(this.state.taskState));
        // }else{
        //     this.setState({
        //         taskState:tasks
        //     })
        //     gantt.init(this.ganttContainer);
        //     var arr=Object.keys(tasks);
        //     if(arr.length!=0)
        //     gantt.parse(tasks);
        //     alert('开始');
        // }

        const btnHand=()=>{
            console.log(gantt.getTask(1)) 
        }

        gantt.attachEvent("onTaskCreated", function(task){
            console.log(task);
            return true;
        });
        return (

            <div>
                <Button type='primary' shape='circle' style={{'width':'200px'}} onClick={btnHand}>
                    发    现
                </Button>
                <hr/>
                <div 
                    ref={(input) => { this.ganttContainer = input }}
                    style={{ width: '100%', height: '100%' }}
                ></div>
            </div>

        );
    }
}